<!-- backend/templates/report_generate.html -->
{% extends "base.html" %}

{% block content %}
    <!-- 页面标题 -->
    <h2 class="mb-4">报告生成与导出</h2>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- 生成报告的表单 -->
            <form id="reportForm" class="mb-4">
                <div class="mb-3">
                    <!-- 选择预测记录的标签 -->
                    <label for="forecastSelect" class="form-label">选择预测记录</label>
                    <!-- 下拉选择框，用于选择预测记录 -->
                    <select class="form-select" id="forecastSelect" required>
                        <option value="">选择预测记录</option>
                        <!-- 预测记录列表将被填充在这里 -->
                    </select>
                </div>
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary w-100">生成报告</button>
            </form>
            <!-- 消息反馈区域 -->
            <div id="message"></div>
            <!-- 加载状态提示 -->
            <div id="loading" class="text-center" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">生成中...</span>
                </div>
            </div>

            <!-- 已生成的报告列表标题 -->
            <h3 class="mt-5">已生成的报告</h3>
            <ul id="reportList" class="list-group">
                <!-- 报告将被列在此处 -->
            </ul>
        </div>
    </div>

    <script>
        // 当DOM内容加载完成后执行
        document.addEventListener('DOMContentLoaded', () => {
            // 获取表单、消息、加载状态、报告列表和预测选择框的DOM元素
            const reportForm = document.getElementById('reportForm');
            const messageDiv = document.getElementById('message');
            const loadingDiv = document.getElementById('loading');
            const reportList = document.getElementById('reportList');
            const forecastSelect = document.getElementById('forecastSelect');

            // 加载预测记录到选择框的异步函数
            const loadForecasts = async () => {
                try {
                    // 发送GET请求获取预测记录
                    const response = await fetch('/api/forecast/list', {
                        method: 'GET',
                        credentials: 'include' // 包含Cookies信息
                    });
                    const data = await response.json();
                    if (response.ok) {
                        // 清空选择框并填充获取到的预测记录
                        forecastSelect.innerHTML = `<option value="">选择预测记录</option>`;
                        data.forecasts.forEach(forecast => {
                            const option = document.createElement('option');
                            option.value = forecast.id; // 设置选项的值为预测ID
                            option.textContent = `预测 ID ${forecast.id} - ${forecast.timestamp}`; // 显示的文本
                            forecastSelect.appendChild(option); // 将选项添加到选择框
                        });
                    } else {
                        // 显示错误信息
                        forecastSelect.innerHTML = `<option value="">无法加载预测记录</option>`;
                    }
                } catch (error) {
                    console.error('加载预测记录失败:', error);
                    // 显示错误信息
                    forecastSelect.innerHTML = `<option value="">加载预测记录时发生错误</option>`;
                }
            };

            // 生成报告的事件处理
            reportForm.addEventListener('submit', async (e) => {
                e.preventDefault(); // 阻止默认提交
                const forecastId = document.getElementById('forecastSelect').value; // 获取所选的预测ID

                if (!forecastId) {
                    // 如果没有选择预测记录，给出警告
                    messageDiv.innerHTML = `<div class="alert alert-warning">请选择一个预测记录。</div>`;
                    return;
                }

                // 构建要发送的JSON数据
                const params = {
                    forecast_id: parseInt(forecastId) // 将选择的预测ID转换为整数
                };

                try {
                    // 显示加载状态
                    loadingDiv.style.display = 'block';
                    messageDiv.innerHTML = ''; // 清空信息区域

                    // 发送POST请求生成报告
                    const response = await fetch('/api/userinterface/report/generate', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json' // 格式为JSON
                        },
                        credentials: 'include', // 包含Cookies信息
                        body: JSON.stringify(params) // 将参数转换为JSON格式
                    });

                    let data;
                    try {
                        data = await response.json(); // 解析响应为JSON
                    } catch (e) {
                        console.error('解析响应为 JSON 失败:', e);
                        data = null; // 如果解析失败，设为null
                    }

                    loadingDiv.style.display = 'none'; // 隐藏加载状态

                    if (response.ok) {
                        // 如果请求成功，显示成功消息
                        if (data && data.message) {
                            messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                        } else {
                            messageDiv.innerHTML = `<div class="alert alert-success">报告生成成功。</div>`;
                        }
                        reportForm.reset(); // 重置表单
                        loadForecasts(); // 重新加载预测记录列表
                        loadReports(); // 重新加载报告列表
                    } else {
                        // 如果请求失败，显示错误消息
                        if (data && data.message) {
                            messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                        } else {
                            messageDiv.innerHTML = `<div class="alert alert-danger">报告生成失败，请重试。</div>`;
                        }
                    }
                } catch (error) {
                    loadingDiv.style.display = 'none'; // 隐藏加载状态
                    console.error('报告生成失败:', error);
                    // 显示错误消息
                    messageDiv.innerHTML = `<div class="alert alert-danger">报告生成失败，请重试。</div>`;
                }
            });

            // 加载报告列表的异步函数
            const loadReports = async () => {
                try {
                    // 发送GET请求获取报告列表
                    const response = await fetch('/api/userinterface/report', {
                        method: 'GET',
                        credentials: 'include' // 包含Cookies信息
                    });
                    const data = await response.json();
                    if (response.ok) {
                        reportList.innerHTML = ''; // 清空报告列表
                        // 循环显示每个报告
                        data.reports.forEach(report => {
                            const listItem = document.createElement('li'); // 创建列表项
                            listItem.className = 'list-group-item d-flex justify-content-between align-items-center'; // 设置样式
                            listItem.innerHTML = `
                                <span>报告 ${report.id} - ${report.timestamp} (${report.report_type}) - 文件: ${report.file_name}</span>
                                <div>
                                    <a href="/api/userinterface/report/download/${report.id}" class="btn btn-sm btn-outline-primary me-2" target="_blank">下载</a>
                                    <button class="btn btn-sm btn-danger" onclick="deleteReport(${report.id})">删除</button>
                                </div>
                            `;
                            reportList.appendChild(listItem); // 添加到报告列表
                        });
                    } else {
                        // 显示错误信息
                        reportList.innerHTML = `<li class="list-group-item text-danger">无法加载报告列表。</li>`;
                    }
                } catch (error) {
                    console.error('加载报告列表失败:', error);
                    // 显示错误信息
                    reportList.innerHTML = `<li class="list-group-item text-danger">加载报告列表时发生错误。</li>`;
                }
            };

            // 删除报告的异步函数
            window.deleteReport = async (reportId) => {
                if (!confirm(`确定要删除报告 ID ${reportId} 吗？`)) return; // 确认是否删除

                try {
                    // 发送DELETE请求删除指定报告
                    const response = await fetch(`/api/userinterface/report/delete/${reportId}`, {
                        method: 'DELETE',
                        credentials: 'include' // 包含Cookies信息
                    });
                    const data = await response.json(); // 解析响应
                    if (response.ok) {
                        // 如果请求成功，显示成功消息
                        messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                        loadReports(); // 重新加载报告列表
                    } else {
                        // 显示错误消息
                        messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                    }
                } catch (error) {
                    console.error('删除报告失败:', error);
                    // 显示错误消息
                    messageDiv.innerHTML = `<div class="alert alert-danger">删除报告失败，请重试。</div>`;
                }
            };

            // 初始加载预测记录和报告列表
            loadForecasts();
            loadReports();
        });
    </script>
{% endblock %}
